<template>
    <div id="serves">
        <div class="serves-banner">
            <img src="@/assets/img/serves1.png" alt="" />
            <div class="serves-banner-text">
                <h1>{{ $t('downloadBannerTitle') }}</h1>
                <p>{{ $t('downloadBannerText') }}</p>
            </div>
        </div>
        <div class="moduleContain">
            <router-view />
        </div>
        <div class="serve" data-aos="fade-up"  data-aos-once='true'>
            <div class="serve-bg">
                <img src="@/assets/img/serve-bg.png" alt="">
            </div>
            <div class="serve-content">
                <div class="serve-l">
                    <img src="@/assets/img/logo.png" alt="" />
                </div>
                <div class="serve-r">
                    <h1>{{ $t('indexServeTitle') }}</h1>
                    <p>ShenZhen YANGWANG Technology company</p>
                </div>
            </div>
            
        </div>
    </div>
</template>
<script>
import AOS from "aos";
export default {
    name:'product',
    data(){
        return{
        }
    },
    mounted(){
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
    }
}    
</script>
<style lang="scss" scoped>
#serves{
    width: 100%;
    .serves-banner{
        width: 100%;
        height: r(608);
        position: relative;
        &-text{
            position: absolute;
            top: 0;
            left: r(360);
            width: r(660);
            height: 100%;
            padding-top: r(259);
            box-sizing: border-box;
            // @include display(center,left);
            // flex-wrap: wrap;
            h1{
                font-size: r(70);
                line-height: r(101);
                color: #fff;
                margin-bottom: r(20);
            }
            p{
                @include textOF(3);
                font-size: r(30);
                color: #fff;
                line-height: r(55);
            }
        }
    }
    .serve{
        width: 100%;
        height: 353px(353);
        position: relative;
        &-bg{
            width: 100%;
            height: 100%;
            position: relative;
            img{
                width: 100%;
                height: 100%;
            }
        }
        // &-bg::before{
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 100%;
        //     display: block;
        //     content: "";
        //     z-index: 1;
        //     background: linear-gradient(45deg,#25487A,rgba(68,132,224,0));
        // }
        .serve-content{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            z-index: 2;
            .serve-l{
                width: r(146);
                height: r(146);
                margin-left: r(167);
                background-color: #fff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: r(122.45);
                    height: r(122.45);
                }
            }
            .serve-r{
                margin-left: r(65);
                h1{
                    line-height: r(101);
                    font-size: r(70);
                    font-weight: bold;
                    color: #F7F9FC;
                }
                p{
                    margin-top: r(9);
                    line-height: r(45);
                    color: #F7F9FC;
                    font-size: r(30);
                }
            }
        }
        
    }
}
</style>